<template>
	<div id="total" style="height: 400px;width: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { badOrderCount } from '@/api/countData'
export default {
	props: {
		badList: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
		}
	},
	mounted() {
		badOrderCount().then((res) => {
			(function () {
				var chartDom = document.getElementById('total');
				var myChart = echarts.init(chartDom);
				var option;
				option = {
					title: {
						text: '不良率'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['逾期≥1天', '逾期≥7天', '逾期≥30天', '逾期≥60天', '逾期≥90天']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						// data: ['2022-10-1', '2022-10-3', '2022-10-5', '2022-10-7', '2022-10-9','2022-10-1', '2022-10-3', '2022-10-5', '2022-10-7', '2022-10-9']
						data: res[0].date.split(' ')
					},
					yAxis: {
						type: 'value',
						name:'单位（个）'
					},
					series: [
						{
							name: '逾期≥1天',
							type: 'line',
							stack: 'Total',
							data: res[1].o_1.split(' ')
						},
						{
							name: '逾期≥7天',
							type: 'line',
							stack: 'Total',
							data: res[2].o_7.split(' ')
						},
						{
							name: '逾期≥30天',
							type: 'line',
							stack: 'Total',
							data: res[3].o_30.split(' ')
						},
						{
							name: '逾期≥60天',
							type: 'line',
							stack: 'Total',
							data: res[4].o_60.split(' ')
						}
						,
						{
							name: '逾期≥90天',
							type: 'line',
							stack: 'Total',
							data: res[5].o_90.split(' ')
						}
					]
				};
				option && myChart.setOption(option);
			})();
		});
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>

</style>
